<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>多选，分页，按键不输入500毫秒自动提交查询</title>
		<link href="../select3.css" rel="stylesheet" />
	</head>

	<body>
		<!--表单包裹层-->
		<div style="width: 360px; display: inline-block;">
			<div class="select3-ui" id="xxx"/>
		</div>
		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
		<script type="text/javascript" src="../select3.js" ></script>
		<script>
		var data1 = {
					"pageSize": 10,
					"pageNo": 1,
					"total": 50,
					"pageNum":5,
					"nodes": [{
						"text": "重庆市",
						"value": "023",
						"selected": false,
						"nodes": null
					}, {
						"text": "北京市",
						"value": "010",
						"selected": false,
						"nodes": null
					}, {
						"text": "上海市",
						"value": "021",
						"selected": false
					}, {
						"text": "天津市",
						"value": "022",
						"selected": false
					}]
				};
		var data2 = {
				"pageSize": 10,
				"pageNo": 1,
				"total": 11,
				"pageNum":2,
				"nodes": [
					{
						"text": "渝中区",
						"value": "001",
						"selected": false
					}, 
					{
						"text": "南岸区",
						"value": "002",
						"selected": false
					}, 
					{
						"text": "巴南区",
						"value": "003",
						"selected": false
					}, 
					{
						"text": "九龙坡区",
						"value": "004",
						"selected": false
					}, 
					{
						"text": "高新区",
						"value": "005",
						"selected": false
					}, 
					{
						"text": "璧山区",
						"value": "006",
						"selected": false
					}, 
					{
						"text": "渝北区",
						"value": "007",
						"selected": false
					}, 
					{
						"text": "两江新区",
						"value": "008",
						"selected": false
					}, 
					{
						"text": "江北区",
						"value": "009",
						"selected": false
					}, 
					{
						"text": "江津区",
						"value": "010",
						"selected": false
					}]
		};
		
		
		var data3 = {
				"pageSize": 10,
				"pageNo": 2,
				"total": 11,
				"pageNum":2,
				"nodes": [
				{
						"text": "永川区",
						"value": "011",
						"selected": false
					}
				]
		};
		
		var data4 = {
				"pageSize": 10,
				"pageNo": 0,
				"total": 0,
				"pageNum":0,
				"nodes": [
				]
		};
			var select = $("#xxx").select3(
				{
					mode: 'remote',
					multiple:true,//是否可以多选
					selectParent:false,//是否可以选择父节点
					duplicate:false,//是否可以重复选
					countdownSearch: true,//倒计时搜索
					countdownTime:500,//倒计时时间单位毫秒
					renderDropdownItemInUiContainer:true,
					closeWhenSelect:true,//当选择完成后关闭面板，仅在单选有效
					debug:true
			},
			'xxx',
			function(select, keyword, pageSize, pageNo){
					if(keyword == '直辖市'){
						return data1;
					}else if(keyword == '重庆'){
						if(pageNo == 1){
							return data2;
						}else{
							return data3;
						}
					}else{
						return data4;
					}
			});
		</script>
	</body>
</html>
				